<template>
  <div class="pk-goods">
    <div class="pk-goods-headphoto" :style="{background:'url('+data.avatar+') center center no-repeat'}"></div>
    <div class="pk-goods-title mt-12 clamp1">{{data.fullname}}</div>
    <div class="pk-goods-desc mt-4 gray-color6 clamp2">{{data.title}}</div>
    <div class="pk-goods-telbox mt-12" @click="onCall">
      <div class="pk-goods-telicon"></div>
      <div class="pk-goods-phoneicon"></div>
      <div class="f-12 mt-8">通话</div>
    </div>
    <div>
      <slot></slot>
    </div>
    <div class="pk-goods-edit" @click="handlerEdit" v-if="!isEdit">
      <el-icon size="20" color="#666"><Edit /></el-icon>
    </div>
    <pk-qrcode scene="C" :channelId="curData.job_id" v-if="linkShow" @onClose="linkShow=false"></pk-qrcode>
  </div>
</template>

<script setup>
  import { ref, onMounted, defineProps, defineEmits } from 'vue'
  import { Edit } from '@element-plus/icons-vue'
  import { useRouter } from 'vue-router'
  import pkButton from '@/components/pkui/pkbutton/pkbutton.vue'
  import pkQrcode from '@/components/pkui/pkqrcode/pkqrcode.vue'
  const router = useRouter();
  const emits = defineEmits(['onCall', 'onEdit'])
  const props = defineProps({
    isEdit: {
      type: Boolean,
      default: false
    },
    data:{
      type:Object,
      default: () => {}
    }
  })
  const curData = ref({})
  const linkShow = ref(false)
  const onCall = (e) => {
    emits('onCall')
  }

  const setInter = (e) => {
    curData.value = props.data
    linkShow.value = true
  }

  const goDetail = () => {
    router.push({
      path:`/candidatedetails/${props.data.job_name}/${props.data.job_id}`
    })
  }

  const handlerEdit = (e) => {
    router.push({
      path:`/myAgentsitem/`,
      query: {
        id: props.data.agent_id
      }
    }) 
  }

</script>

<style lang="scss" scoped>
.pk-goods{
  padding: 12px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0px 0px 0px 1px rgb(140 140 140 / 0.2);
  display: flex;
  flex-direction: column;
  align-items:center;
  cursor: pointer;
  position: relative;
  &-headphoto{
    width: 64px;
    height: 64px;
    border-radius: 64px;
    background: url("@/assets/usericon.png") center center no-repeat;
    background-size: 64px auto!important; 
    // border:#ddd 1px solid;
    box-shadow: 0px 0px 0px 1px rgba(140, 140, 140, 0.2);
    position: relative;
  }
  &-mianshiguan{
    position: absolute;
    bottom:0;
    right: -60px;
    color: #9a9898;
  }
  &-title{
    font-size: 16px;
    font-weight: bold;
    color: #000;
  }
  &-desc{
    height: 20px;
    font-size: 12px;
    word-break: break-all;
    line-height: 20px;
    text-align: center;
    width: 100%;
  }
  &-telbox{
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    color: #737a87;
  }
  &-telicon{
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background: url("@/assets/CallWrapper.svg") center center no-repeat;
    background-size: 40px auto; 
  }
  &-phoneicon{
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background: url("@/assets/Phone.svg") center center no-repeat;
    background-size: 20px auto; 
  }

  &-footer{
    width: 100%;
  }
  &-footerItem {
    padding-right: 16px;
    background: url("@/assets/icon/righticon.svg") center right no-repeat;
    background-size: 14px auto;
  }
  &-edit{
    position: absolute;
    top: 10px;
    right: 16px;
  }
}
</style>